<template lang="html">
  <div>
  <mheader></mheader>
  <div class="collegeMenu">
    <div class="collegeMain">
      <div class="collegeTop">
        <el-row class="collegeBread"><b>当前位置：</b>MBA班型搜索结果</el-row>
        <el-row class="collegeSelect">
          <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
              <el-select v-model="form.college" placeholder="请选择院校" size="small" class="formSelect" @change="collegeChange">
                <el-option :label="i.name" :value="i.id" v-for="(i, index) in collegeList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.secience" placeholder="请选择学位" size="small" class="formSelect" @change="secienceChange">
                <el-option label="请选择学位" value=""></el-option>
                <el-option :label="i.name" :value="i.id" v-for="(i, index) in secienceList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select v-model="form.class" placeholder="请选择班型" size="small" class="formSelect">
                <el-option label="请选择班型" value=""></el-option>
                <el-option :label="i.name" :value="i.id" v-for="(i, index) in classList" :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small" class="formSubmit" @click="search">确认</el-button>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row class="collegeDownTop">
          <h3 class="collegeTitle">{{ headerInfo.schoolName }}</h3>
          <h3 class="SecienceDes">{{ headerInfo.degreeName }}</h3>
          <h2 class="SecienceClassName">{{ headerInfo.className }}</h2>
          <a :href="schoolobj.introducePics" class="collegeDownload" v-if="schoolobj.introducePics!=null && schoolobj.introducePics!=''">{{ schoolobj.introduceText }}<img src="../assets/images/download.png"></a>
          <!-- <a href="http://140.143.63.54/mba/index.html#/" class="SecienceClassBtn">立即报名该班型</a> -->
          <router-link to="/stuEnroll">
            <!-- <a href="http://140.143.63.54/mba/index.html#/"> -->
              <p class="SecienceClassBtn">立即报名该班型</p>
            <!-- </a> -->
            </router-link>
          <div class="SecienceClassCard">
            <h3>基本信息</h3>
            <div class="SecienceClassCardDes">
              <div class="SecienceClassCardDesFlex" v-if="classInfo.policiesList && classInfo.policiesList.length > 0">
                <div class="SecienceClassCardTitle">
                  最近一期报名截止时间：
                </div>
                <div class="SecienceClassCardText">
                  {{ classInfo.policiesList[0].endDate1 }}
                </div>
              </div>
              <div class="SecienceClassCardDesFlex" v-if="classInfo.policiesList && classInfo.policiesList.length > 0">
                <div class="SecienceClassCardTitle">
                  最近一期入学时间：
                </div>
                <div class="SecienceClassCardText">
                  {{ classInfo.policiesList[0].startDate1 }}
                </div>
              </div>
            </div>
            <div class="SecienceClassCardDes">
              <div class="SecienceClassCardTitle">
                提交必须材料清单：
              </div>
              <div class="SecienceClassCardText">
                <p>以下材料请提供原件扫描件或者复印件扫描件： </p>
                <div v-html="classInfo.necessaryData"></div>
              </div>
            </div>
          </div>
        </el-row>
      </div>
    </div>
    <div class="SecienceReviewMenu" v-if="classInfo.AuditConditionEntityList!='' && classHide">
      <div class="SecienceReviewMain">
        <h3 class="SecienceReviewMainTitle">{{ headerInfo.className }} 奖学金{{reward}}</h3>
        <div class="SecienceReviewMainDesA" v-for="(i, index) in classInfo.AuditConditionEntityList" ref="calH" :key="index">
          <div class="SecienceReviewMainDesAtit">
            <div class="SecienceReviewMainDesAtitL"></div>
            <div class="SecienceReviewMainDesAtitR">班型审核条件{{ n[index] }}</div>
          </div>
          <el-row class="SecienceReviewMainLi" :gutter="20" >
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.educationLimitValue && i.educationLimitType!=1">
              <span>学历：</span>
              <b>{{ i.educationLimitType==3?classRules.educationLimitValue[i.educationLimitValue]+'起':'指定'+classRules.educationLimitValue[i.educationLimitValue] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.schoolLimitValue && i.schoolLimitType!=1">
              <span>院校类型条件：</span>
              <b>{{ i.schoolLimitType==3?classRules.schoolLimitValue[i.schoolLimitValue]+'起':'指定'+classRules.schoolLimitValue[i.schoolLimitValue] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.studyFormLimitValue && i.studyFormLimitType!=1">
              <span>学习形式条件：</span>
              <b>{{ i.studyFormLimitType==3?classRules.studyFormLimitValue[i.studyFormLimitValue]+'起':'指定'+classRules.studyFormLimitValue[i.studyFormLimitValue] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.professionLimitValue && i.professionLimitType!=1">
              <span>专业条件：</span>
              <b>{{ i.professionLimitType==3?i.professionLimitValue+'起':i.professionLimitValue }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.studyYear_limitValue && i.studyYearLimitType!=1">
              <span>学习年限：</span>
              <b>{{ i.studyYearLimitType==3?classRules.studyYear_limitValue[i.studyYear_limitValue]+'起':'指定'+classRules.studyYear_limitValue[i.studyYear_limitValue] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.fullEducationLimitType && i.fullEducationLimitType!=1">
              <span>全日制条件：</span>
              <b>{{ classRules.fullEducationLimitType[i.fullEducationLimitType] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.subjectLimitValue && i.subjectLimitType!=1">
              <span>科目数量条件：</span>
              <b>{{ i.subjectLimitType==3?classRules.subjectLimitValue[i.subjectLimitValue]+'起':'指定'+classRules.subjectLimitValue[i.subjectLimitValue] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.averageGradeLimitType!=1 && i.averageGradeLimitValue">
              <span>成绩平均分值：</span>
              <b>{{ i.averageGradeLimitValue+'起' }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.graduateCertLimitType!=1">
              <span>毕业证：</span>
              <b>{{ classRules.graduateCertLimitType[i.graduateCertLimitType] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.degreeCertLimitType!=1">
              <span>学位证：</span>
              <b>{{ classRules.degreeCertLimitType[i.degreeCertLimitType] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.certWebsitLimitType!=1">
              <span>学信网：</span>
              <b>{{ classRules.certWebsitLimitType[i.certWebsitLimitType] }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.gpaGradeLimitType!=1 && i.gpaGradeLimitValue">
              <span>GPA分值：</span>
              <b>{{ i.gpaGradeLimitValue+'起' }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.totalWorkYearLimitType!=1 && i.totalWorkYearLimitValue">
              <span>总工作年限：</span>
              <b>{{ i.totalWorkYearLimitType==3?i.totalWorkYearLimitValue+'年起':'指定'+i.totalWorkYearLimitValue+'年' }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.lastWorkYearLimitValue && i.lastWorkYearLimitType!=1">
              <span>最后一份工作年限：</span>
              <b>{{ i.lastWorkYearLimitType==3?i.lastWorkYearLimitValue+'年起':'指定'+i.lastWorkYearLimitValue+'年' }}</b>
            </el-col>
            <el-col :span="6" class="SecienceReviewSingle" v-if="i.salaryLimitType!=1 && i.salaryLimitValue">
              <span>年薪：</span>
              <b>{{ i.salaryLimitType==3?i.salaryLimitValue+'万起':'指定'+i.salaryLimitValue+'万' }}</b>
            </el-col>
            <el-col :span="24" class="SecienceReviewSingle" v-if="i.studyCondExpandLimitValue && i.studyCondExpandLimitType!=1">
              <span>其他学习条件：</span><br />
              <b>{{ i.studyCondExpandLimitValue }}</b>
            </el-col>
            <el-col :span="24" class="SecienceReviewSingle" v-if="i.workCondExpandLimit!=1">
              <span>其他工作条件：</span><br />
              <b>{{ i.workCondExpandValue }}</b>
            </el-col>
          </el-row>
        </div>
        <router-link to="/stuEnroll">
            <!-- <a href="http://140.143.63.54/mba/index.html#/"> -->
              <p class="collegeMbaApply">立即申请该班型</p>
            <!-- </a> -->
        </router-link>
        <!-- <a href="http://140.143.63.54/mba/index.html#/" class="collegeMbaApply">立即申请该班型</a> -->
      </div>
    </div>
    <div class="SecienceMoneyMenu">
      <div class="SecienceMoneyMain">
        <h3>专业报名相关费用</h3>
        <div class="SecienceMoneyMainDes">
          <div class="SecienceMoneyMainDesL">
            <h5 class="SecienceMoneyMainDesH3">申请费</h5>
            <p>申请费用：￥{{ degreecost.applyMoney }}</p>
            <p>费用包含：<br />取得入学资格前的一切材料认定/资格审核/翻译件制作和美化</p>
          </div>
          <div class="SecienceMoneyMainDesLine"></div>
          <div class="SecienceMoneyMainDesR">
            <h5 class="SecienceMoneyMainDesH3">学费</h5>
            <p>总额：￥{{ degreecost.totalMoney}}</p>
            <p>一期：￥{{ degreecost.firstTermMoney}}</p>
            <p>二期：￥{{ degreecost.secondTermMoney}}</p>
          </div>
        </div>
      </div>
    </div>
    <div class="ClassxsjmMenu" v-if="classInfo.policiesList && classInfo.policiesList.length > 0">
      <div class="ClassxsjmMain">
        <h3>限时减免</h3>
        <div class="ClassxsjmContent">
          <div v-for="(i, index) in classInfo.policiesList" :key="index" class="ClassxsjmContentLi">
            <div class="ClassxsjmInlineLeft">
              <span>助学金：</span>
              <b>￥{{i.financial}}</b>
            </div>
            <div class="ClassxsjmInlineRight">
              <span>优惠截止日期：</span>
              <b>{{i.endDate1}}</b>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="SecienceMethodMenu">
      <div class="SecienceMethodMain">
        <h3 class="SecienceMethodMainTitle">金融解决方案</h3>
        <div class="SecienceMethodMainContent">
            <div class="SecienceMethodMainContentW" :class="jrA?'':'grey'">
              <h3>咖啡易融</h3>
              <div class="SecienceMethodMainContentP">
                <p>最低贷款额度￥2000</p>
                <p>最高贷款额度2万</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>可分期数：3，6，9，12</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>状态：{{ jrA?'已配置':'未配置' }}</p>
              </div>
            </div>
            <div class="SecienceMethodMainContentW" :class="jrB?'':'grey'">
              <h3>融360</h3>
              <div class="SecienceMethodMainContentP">
                <p>最低贷款额度￥2000</p>
                <p>最高贷款额度5万</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>可分期数：6，12</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>状态：{{ jrB?'已配置':'未配置' }}</p>
              </div>
            </div>
            <div class="SecienceMethodMainContentW" :class="jrC?'':'grey'">
              <h3>百度</h3>
              <div class="SecienceMethodMainContentP">
                <p>最低贷款额度￥2000</p>
                <p>最高贷款额度5万</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>可分期数：3，6，12</p>
              </div>
              <div class="SecienceMethodMainContentP">
                <p>状态：{{ jrC?'已配置':'未配置' }}</p>
              </div>
            </div>
        </div>
      </div>
    </div>
    <div class="collegeMoreMenu" v-if="classInfo.getMoreClassType!=''">
      <div class="collegeMorelist">
        <h3 class="collegeMoreTitle">该学位的更多班型</h3>
        <el-row class="collegeMoreUl" :gutter="20">
          <el-col :span="8" v-for="(i, index) in classInfo.getMoreClassType" :key="index"><div class="collegeMoreLi" @click="changeClass(i)"><p>{{ i.className }}</p></div></el-col>
        </el-row>
      </div>
    </div>
  </div>
  <!-- <mfooter></mfooter> -->
  </div>
</template>

<script>
import mheader from '@/components/mheader'
// import mfooter from '@/components/mfooter'
import {
  getInformation
} from '@/api'
import {
  n,
  classRules
} from '@/util'
export default {
  name: 'college',
  components: {
    mheader
    // mfooter
  },
  data () {
    return {
      form: {
        college: '',
        secience: '',
        class: ''
      },
      collegeList: [],
      secienceList: [],
      classList: [],
      schoolName: '',
      schoolName1: '',
      headerInfo: '',
      schoolobj: '',
      classInfo: '',
      n: {},
      classRules: {},
      degreecost: {},
      jrA: false,
      jrB: false,
      jrC: false,
      lendingInstitutions: [],
      reward: '',
      classHide: true
    }
  },
  created () {
    // window.scrollTo(0, 0)
    this.n = n
    this.classRules = classRules
    this.collegeList = JSON.parse(sessionStorage.collegeList)
    this.schoolobj = JSON.parse(sessionStorage.schoolobj)
    this.form.college = Number(this.$route.params.schoolId)
    this.form.secience = Number(this.$route.params.degreeId)
    this.form.class = Number(this.$route.params.classId)
    this.load()
    for (let i = 0; i < this.collegeList.length; i++) {
      if (this.collegeList[i].id === this.form.college) {
        this.secienceList = this.collegeList[i].degreeResultVoList
      }
    }
    for (let i = 0; i < this.secienceList.length; i++) {
      if (this.secienceList[i].id === this.form.secience) {
        this.classList = this.secienceList[i].classTypeResultVoList
      }
    }
  },
  methods: {
    load () {
      let params = {
        schoolId: this.form.college,
        degreeId: this.form.secience,
        classId: this.form.class
      }
      getInformation(params).then(res => {
        this.headerInfo = res.data.classInformationList.getInformation[0]
        this.classInfo = res.data.classInformationList
        this.degreecost = res.data.classInformationList.degreecost[0]
        if (res.data.classInformationList.AuditConditionEntityList) {
          this.reward = res.data.classInformationList.reward + '元'
        }
        this.lendingInstitutions = res.data.classInformationList.financialSolution[0].lendingInstitutions.split(',')
        for (let i = 0; i < this.lendingInstitutions.length; i++) {
          if (this.lendingInstitutions[i] === '1') {
            this.jrA = true
          } else if (this.lendingInstitutions[i] === '2') {
            this.jrB = true
          } else if (this.lendingInstitutions[i] === '3') {
            this.jrC = true
          }
        }
        this.$nextTick(() => {
          let refs = this.$refs.calH
          this.classHide = true

          refs && refs.map((ref) => {
            if (ref.offsetHeight < 50) {
              this.classHide = false
              ref.style.display = 'none'
            }
          })
          // console.log(refs[1].offsetHeight)
          // refs[1].style.display= "none"
          // console.log(refs.getElementsByClassName('SecienceReviewMainLi'))
          // crefs[1]
        })
      })
    },
    search () {
      this.jrA = false
      this.jrB = false
      this.jrC = false
      sessionStorage.schoolName = this.schoolName1
      sessionStorage.collegeId = this.form.college
      if (this.form.college !== '' && this.form.secience === '' && this.form.class === '') { // 只调院校
        this.$router.push({
          path: '/college'
        })
      } else if (this.form.college !== '' && this.form.secience !== '' && this.form.class === '') { // 只调学位
        this.$router.push({
          path: '/secience/' + this.form.college + '/' + this.form.secience
        })
      } else if (this.form.college !== '' && this.form.secience !== '' && this.form.class !== '') { // 只调学位
        this.load()
      }
    },
    collegeChange () {
      this.form.secience = ''
      this.form.class = ''
      this.classList = []
      for (let i = 0; i < this.collegeList.length; i++) {
        if (this.collegeList[i].id === this.form.college) {
          this.schoolName1 = this.collegeList[i].name
          this.secienceList = this.collegeList[i].degreeResultVoList
        }
      }
    },
    secienceChange () {
      this.form.class = ''
      for (let i = 0; i < this.secienceList.length; i++) {
        if (this.secienceList[i].id === this.form.secience) {
          this.classList = this.secienceList[i].classTypeResultVoList
        }
      }
    },
    changeClass (row) {
      this.form.class = row.classId
      this.load()
      // window.scrollTo(0, 0)
    }
  }
}
</script>
<style lang="less" scoped>
@import url('../style/base');
.collegeMenu {
  width: 100%;
  overflow: hidden;
  .collegeMain {
    width: 905px;
    overflow: hidden;
    margin: 0 auto;
    .collegeTop {
      width: 100%;
      overflow: hidden;
      background: #fff;
    }
    .collegeBread {
      margin-top: 19px;
      b {
        font-weight: bold;
      }
    }
    .collegeSelect {
      margin-top: 49px
    }
    .formSelect {
      width: 235px;
      margin-right: 10px;
    }
    .formSubmit {
      width: 106px;
      background: #A51C30;
      border-color: #A51C30;
    }
    .formSubmit:hover {
      opacity: .7
    }
    .collegeDownTop {
      position: relative;
      min-height: 100px;
      overflow: hidden;
    }
    .collegeTitle {
      margin-top: 37px;
      font-size: 20px;
      font-family: 'STSongti-SC-Black'
    }
    .collegeDownload {
      font-size: 16px;
      color: #D96873;
      position: absolute;
      right: 0;
      top: 44px;
      vertical-align: middle;
      img {
        width: 23px;
        height: 23px;
        vertical-align: middle;
        margin-left: 10px;
      }
    }
  }
  .collegeMoreMenu {
    width: 100%;
    overflow: hidden;
    background: rgba(164, 140, 144, .08);
    .collegeMorelist {
      width: 905px;
      margin: 45px auto 98px auto;
      .collegeMoreTitle {
        font-size: 20px;
        font-family: 'STSongti-SC-Black';
      }
      .collegeMoreUl {
        width: 100%;
        overflow: hidden;
        margin-top: 26px;
      }
      .collegeMoreLi {
          width: 290px;
          height: 290px;
          background-size: cover !important;
          margin-top: 10px;
          text-align: center;
          line-height: 34px;
          color: #fff;
          font-size: 24px;
          cursor: pointer;
          transition: .5s;
          background: grey;
          box-sizing: border-box;
          padding: 0 30px;
          .displayCenter;
      }
      .collegeMoreLi:hover {
          opacity: 0.8;
      }
      .collegeMoreLine {
          width: 100%;
          margin-top: 120px;
          overflow: hidden;
      }
    }
  }
  .SecienceDes {
    margin-top: 14px;
    font-size: 16px;
  }
  .SecienceClassName {
    margin-top: 20px;
    font-size: 20px;
    font-weight: bold;
  }
  .SecienceClassDes {
    margin: 50px 0 28px 10px;
    font-size: 20px;
    font-weight: bold;
  }
  .SecienceClassCard {
    width: 864px;
    box-shadow: 0 2px 10px 0 rgba(115, 130, 150, 0.1);
    overflow: hidden;
    margin: 28px auto 56px auto;
    padding: 17px;
    border-radius: 4px;
    h3 {
      font-size: 20px;
      font-weight: bold;
      margin-top: 4px;
    }
    .SecienceClassCardDes {
        margin-top: 28px;
        font-size: 14px;
        width: 100%;
        .SecienceClassCardDesFlex {
          display: flex;
          margin-top: 5px;
        }
        .SecienceClassCardTitle {
            width: 170px;
            line-height: 20px;
        }
        .SecienceClassCardText {
            flex-grow: 1;
            line-height: 20px;
            p {
                line-height: 20px;
                margin-bottom: 7px;
            }
        }
    }
  }
  .collegeMbaApply {
    margin: 13px auto 73px auto;
    width: 403px;
    height: 82px;
    line-height: 82px;
    border-radius: 4px;
    background: #A51C30;
    text-align: center;
    color: #fff;
    font-size: 36px;
    font-family: 'STSongti-SC-Black';
    display: block;
  }
  .collegeMbaApply:hover {
    opacity: .8
  }
  .SecienceClassBtn {
    width: 206px;
    height: 41px;
    line-height: 41px;
    text-align: center;
    color: #fff;
    background: #970A18;
    border-radius: 4px;
    font-size: 18px;
    position: absolute;
    right: 0;
    top: 90px;
  }
  .SecienceClassBtn:hover {
    opacity: .7
  }
  .SecienceReviewMenu {
    width: 100%;
    overflow: hidden;
    background: rgba(164, 140, 144, .08);
    .SecienceReviewMain {
      width: 900px;
      margin: 0 auto;
      .SecienceReviewMainTitle {
        font-size: 20px;
        font-family: 'STSongti-SC-Black';
        margin-top: 48px;
      }
      .SecienceReviewMainDesA {
        padding: 17px;
        background: #fff;
        box-shadow: 0 10px 10px 0 rgba(150, 115, 115, 0.12);
        margin: 83px 0 118px 0;
        position: relative;
        border-radius: 8px;
        .SecienceReviewMainDesAtit {
          position: absolute;
          top: -44px;
          left: 0;
          width: 230px;
          height: 45px;
          background: #fff;
          box-shadow: 0 2px 4px 0 rgba(189, 186, 186, 0.5);
          border-radius: 4px;
          .SecienceReviewMainDesAtitL {
            width: 6px;
            height: 45px;
            border-radius: 4px;
            float: left;
            background: #C9838C;
            box-shadow: 0 2px 4px 0 rgba(189, 186, 186, 0.5);
          }
          .SecienceReviewMainDesAtitR {
            padding-left: 18px;
            line-height: 45px;
            font-size: 18px;
            color: #A41D2F;
            font-weight: bold;
          }
        }
        .SecienceReviewMainLi {
          font-size: 14px;
          margin-bottom: 32px;
          line-height: 24px;
          b {
            font-weight: bold;
          }
          i {
            font-weight: bold;
            display: block;
            line-height: 20px;
            margin-top: 6px;
          }
        }
        .SecienceReviewMainLi:last-child {
          margin-bottom: 0
        }
      }
    }
  }
  .SecienceMoneyMenu {
    width: 100%;
    overflow: hidden;
    .SecienceMoneyMain {
      width: 905px;
      overflow: hidden;
      margin: 0 auto;
      h3 {
        font-size: 20px;
        font-family: 'STSongti-SC-Black';
        margin-top: 57px;
      }
    }
    .SecienceMoneyMainDes {
      width:853px;
      box-shadow: 0 2px 10px 0 rgba(115, 130, 150, 0.1);
      overflow: hidden;
      padding: 24px 40px;
      position: relative;
      margin-top: 29px;
      margin-bottom: 89px;
      .SecienceMoneyMainDesL {
        width: 260px;
        float: left;
        color: #4A4A4A;
        .SecienceMoneyMainDesH3 {
          font-size: 16px;
          font-family: 'STSongti-SC-Black';
          margin-bottom: 4px;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          line-height: 20px;
        }
      }
      .SecienceMoneyMainDesR {
        width: 260px;
        float: right;
        color: #4A4A4A;
        .SecienceMoneyMainDesH3 {
          font-size: 16px;
          font-family: 'STSongti-SC-Black';
          margin-bottom: 4px;
        }
        p {
          margin-top: 10px;
          font-size: 14px;
          line-height: 20px;
        }
      }
      .SecienceMoneyMainDesLine {
        position: absolute;
        width: 2px;
        height: 82px;
        background: rgba(151, 151, 151, .13);
        left: 459px;
        top: 37px;
      }
    }
  }
  .SecienceMethodMenu {
    width: 100%;
    background: #fff;
    .SecienceMethodMain {
      width: 905px;
      margin: 0 auto;
      overflow: hidden;
      .SecienceMethodMainTitle {
        font-size: 20px;
        font-family: 'STSongti-SC-Black';
        margin-top: 46px;
        margin-bottom: 29px;
      }
      .SecienceMethodMainContent {
        width: 890px;
        margin: 0 auto 57px auto;
        padding-bottom: 20px;
        overflow: hidden;
      }
      .SecienceMethodMainContentW {
        width: 153px;
        height: 154px;
        box-shadow: 0 2px 10px 0 rgba(198, 165, 170, 0.36);
        border-radius: 4px;
        background: #fff;
        padding: 23px 35px;
        color: #4A4A4A;
        float: left;
        margin-right: 70px;
        transition: .5s;
        h3 {
          font-size: 14px;
          font-family: 'STSongti-SC-Black'
        }
        .SecienceMethodMainContentP {
          margin-top: 14px;
          font-size: 14px;
          line-height: 20px;
        }
      }
      .SecienceMethodMainContentW:hover {
          background: #A41D2F;
          color: #FFFFFF;
      }
    }
  }
  .SecienceReviewSingle {
      margin-bottom: 32px;
  }
  .SecienceReviewSingle:nth-last-child(1) {
      margin-bottom: 0;
  }
  .grey {
    background: #f1f1f1 !important;
  }
  .ClassxsjmMenu {
    width: 100%;
    background: rgba(164, 140, 144, 0.08);
    .ClassxsjmMain {
      width: 905px;
      margin: 0 auto;
      overflow: hidden;
      padding-bottom: 50px;
      h3 {
        font-size: 20px;
        font-family: 'STSongti-SC-Black';
        margin-top: 57px;
      }
      .ClassxsjmContent {
        box-shadow: 0 2px 10px 0 rgba(198, 165, 170, 0.36);
        border-radius: 4px;
        background: #fff;
        padding: 20px;
        color: #4A4A4A;
        margin-top: 29px;
        width: 830px;
        .ClassxsjmContentLi {
          width: 100%;
          display: flex;
        }
        .ClassxsjmInlineLeft {
          display: inline-block;
          line-height: 30px;
          flex-grow: 1;
          width: 300px;
          padding-left: 50px;
          b {
            font-weight: bold;
            color: #A51C30;
          }
        }
        .ClassxsjmInlineRight{
          display: inline-block;
          flex-grow: 1;
          line-height: 30px;
          padding-left: 100px;
          border-left: 2px solid rgba(151, 151, 151, 0.13);
        }
      }
    }
  }
}
</style>
